<template>
    <div :class="style.box">
        <div v-if="isNoEmpty" :class="style.catelist">
            <a v-for="(item, index) in formData.imgList" :key="index" :href="item.img.imgLink" :class="style.cateItem">
                <el-image
                    :class="style.cateItemImg"
                    :src="item.img.imgUrl"
                    :style="{
                        width: '50px',
                        height: '50px',
                    }"
                    fit="cover"
                >
                </el-image>
                <span :class="style.cateItemName">{{ item.name }}</span>
            </a>
        </div>
        <div v-else :class="style.emptyBox">
            点击配置数据
        </div>
    </div>
</template>

<script>
export default {
    name: 'CategoryList',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        }
    },
    data () {
        return {
            style: {}
        };
    },
    computed: {
        isNoEmpty () {
            const { formData } = this;
            return formData.imgList && formData.imgList.length > 0;
        }
    }
};
</script>
